<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
  var styleSheets = {
    footer:{
      width:'100%',
      height:'6rem',
      display:'flex'
    },
    div:{
      width:'33.3333%',
      height:'6rem',
      backgroundColor:'#acacac',
      color:'red',
      textAlign:'center',
      fontSize:'1.5rem'

    }
  }

   var Header = React.createClass({
      render:function(){
        return (
          <div>This is header</div>
        )
      }
   });

   var List = React.createClass({
      render:function(){
        return (
          <div>This is list</div>
        )
      }
   });

   var Classfiy = React.createClass({
      render:function(){
        return (
          <div>This is Classfiy</div>
        )
      }
   });

   var My = React.createClass({
      render:function(){
        return (
          <div>This is my</div>
        )
      }
   });

   var Footer = React.createClass({
      handlerClick:function(event){
        var _title = event.target.getAttribute("title");
        switch(_title){
          case "index":
            //组件如何卸载    ReactDOM.unmountComponentAtNode(节点)
            ReactDOM.unmountComponentAtNode(document.getElementById('list'));
            //新组件如何引入   
            ReactDOM.render( <List/>, 
              document.getElementById('list'),
              function(){
                console.log('List渲染完成啦！！');
              }
            )
          break;

          case "classfiy":
            ReactDOM.unmountComponentAtNode(document.getElementById('list'));
            ReactDOM.render( <Classfiy/>, 
              document.getElementById('list'),
              function(){
                console.log('Class渲染完成啦！！');
              }
            )
          break;

          case "my":
            ReactDOM.unmountComponentAtNode(document.getElementById('list'));
            ReactDOM.render( <My/>, 
              document.getElementById('list'),
              function(){
                console.log('My渲染完成啦！！');
              }
            )
          break;
          
        }
      },
      render:function(){
        return (
          <div style={styleSheets.footer}>
            <div onClick={this.handlerClick} title="index" style={styleSheets.div}>首页</div>
            <div onClick={this.handlerClick} title="classfiy" style={styleSheets.div}>分类</div>
            <div onClick={this.handlerClick} title="my" style={styleSheets.div}>我的</div>
          </div>
        )
      }
   });

   // 1.基于组件嵌套，定义一个大的组件，将子组件嵌套进去，实现组件的集中渲染
   // 2.定义一个大组件作为页面布局，没有任何样式，先把这个组件渲染到页面中，再把每个子组件单个渲染进去
   var Layout = React.createClass({
    render:function(){
      return(
        <div>
          <div id="header">
            <Header/>
          </div>
          <div id="list">
            <List/>
          </div>
          <div id="footer">
            <Footer/>
          </div>
        </div>
      )
    }
   })

   ReactDOM.render( <Layout/>, 
      document.getElementById('app'),
      function(){
        console.log('Layout渲染完成啦！！');
      }
    )
   
   
   
</script>
</body>
</html>